<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="documentation">
        <meta name="product" content="kendo-ui">
        
        <title>Introduction | Progress Kendo UI</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="Learn about the Kendo UI controls, their distributions, frameworks, tools, and utilities.">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("introduction.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//introduction.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    

    <div id="page-article">
        <article>
            
             <h1 id="welcome-to-kendo-ui-for-jquery"><a href="#welcome-to-kendo-ui-for-jquery">Welcome to Kendo UI for jQuery!</a></h1>

<p>Progress<sup>®</sup> Kendo UI is an HTML5 user interface framework for building interactive and high-performance websites and applications.</p>

<p><a href="http://demos.telerik.com/kendo-ui/">Check Out Kendo UI Online Demos</a></p>

<h3 id="overview"><a href="#overview">Overview</a></h3>

<p>Kendo UI is a comprehensive framework which comes with a library of 70+ UI widgets, an abundance of data-visualization gadgets, client-side data source, and a built-in MVVM (Model-View-ViewModel) library. It provides AngularJS and Bootstrap integration and is also distributed as part of several product units that you can choose from depending on your project requirements. Kendo UI includes widgets for enterprise-grade line-of-business applications and is suitable for creating professional websites that require expert and timely technical support.</p>

<ul>
<li><a href="/intro/supporting/list-of-widgets">List of Kendo UI Components</a></li>
<li><a href="/intro/supporting/browser-support">Browser Support</a></li>
<li><a href="http://www.telerik.com/download/kendo-ui">Evaluate Kendo UI Professional</a></li>
<li><a href="http://www.telerik.com/purchase/kendo-ui">Get a License</a></li>
<li><a href="http://www.telerik.com/purchase/license-agreement/kendo-ui">License Agreement</a></li>
</ul>

<h4>Progress<sup>®</sup> Kendo UI Wrappers for React</h4>

<p><a href="http://docs.telerik.com/kendo-ui-wrappers-react/introduction">Kendo UI Wrappers for React</a> are part of the Kendo UI suite. They provide an easy way to use and configure Kendo UI widgets in your React application.</p>

<ul>
<li><a href="/intro/supporting/browser-support">Browser Support</a></li>
<li><a href="http://www.telerik.com/purchase/kendo-ui">Get a License</a></li>
<li><a href="http://www.telerik.com/purchase/license-agreement/kendo-ui">License Agreement</a></li>
<li><a href="http://docs.telerik.com/kendo-ui-wrappers-react/introduction">Documentation</a></li>
</ul>

<h4>Progress<sup>®</sup> Kendo UI Wrappers for Vue</h4>

<p><a href="http://docs.telerik.com/kendo-ui-wrappers-vue/introduction">Kendo UI Wrappers for Vue</a> are part of the Kendo UI suite. They provide an easy way to use and configure Kendo UI widgets in your Vue.js application.</p>

<ul>
<li><a href="/intro/supporting/browser-support">Browser Support</a></li>
<li><a href="http://www.telerik.com/purchase/kendo-ui">Get a License</a></li>
<li><a href="http://www.telerik.com/purchase/license-agreement/kendo-ui">License Agreement</a></li>
<li><a href="http://docs.telerik.com/kendo-ui-wrappers-vue/introduction">Documentation</a></li>
</ul>

<h4>Progress<sup>®</sup> Telerik<sup>®</sup> UI for ASP.NET MVC</h4>

<p><a href="http://docs.telerik.com/aspnet-mvc/introduction">Telerik UI for ASP.NET MVC</a> is a Kendo UI product flavor which targets ASP.NET MVC developers. It includes all Kendo UI components as well as HtmlHelper extension methods (server-side wrappers) which allow you to configure the Kendo UI widgets by using C# code.</p>

<ul>
<li><a href="/intro/supporting/list-of-widgets">List of Kendo UI Components</a></li>
<li><a href="/intro/supporting/browser-support">Browser Support</a></li>
<li><a href="https://www.telerik.com/download-trial-file/v2/ui-for-asp.net-mvc">Evaluate Telerik UI for ASP.NET MVC</a></li>
<li><a href="http://www.telerik.com/purchase/aspnet-mvc">Get a License</a></li>
<li><a href="http://www.telerik.com/purchase/license-agreement/aspnet-mvc">License Agreement</a></li>
<li><a href="http://docs.telerik.com/aspnet-mvc/introduction">Documentation</a></li>
</ul>

<h4>Progress<sup>®</sup> Telerik<sup>®</sup> UI for ASP.NET Core</h4>

<p><a href="http://docs.telerik.com/aspnet-core/introduction">Telerik UI for ASP.NET Core</a> supports the .NET Core runtime. It includes all Kendo UI widgets as well as the Kendo UI Tag Helpers which allow you to configure the Kendo UI widgets by using the new Tag Helpers feature in ASP.NET Core.</p>

<ul>
<li><a href="/intro/supporting/list-of-widgets">List of Kendo UI Components</a></li>
<li><a href="/intro/supporting/browser-support">Browser Support</a></li>
<li><a href="https://www.telerik.com/download-trial-file/v2/ui-for-asp.net-mvc">Evaluate Telerik UI for ASP.NET Core</a></li>
<li><a href="http://www.telerik.com/purchase/aspnet-mvc">Get a License</a></li>
<li><a href="http://www.telerik.com/purchase/license-agreement/aspnet-mvc">License Agreement</a></li>
<li><a href="http://docs.telerik.com/aspnet-core/introduction">Documentation</a></li>
</ul>

<h4>Progress<sup>®</sup> Telerik<sup>®</sup> UI for JSP</h4>

<p><a href="/jsp/introduction">Telerik UI for JSP</a> is a Kendo UI product flavor which targets the Java web application developers. It includes Java Server Pages (JSP) tags for all Kendo UI Professional widgets.</p>

<ul>
<li><a href="/intro/supporting/list-of-widgets">List of Kendo UI Components</a></li>
<li><a href="/intro/supporting/browser-support">Browser Support</a></li>
<li><a href="http://www.telerik.com/download/jsp-ui">Evaluate Telerik UI for JSP</a></li>
<li><a href="http://www.telerik.com/purchase/jsp-ui">Get a License</a></li>
<li><a href="http://www.telerik.com/purchase/license-agreement/jsp-ui">License Agreement</a></li>
<li><a href="/jsp/introduction">Documentation</a></li>
</ul>

<h4>Progress<sup>®</sup> Telerik<sup>®</sup> UI for PHP</h4>

<p><a href="/php/introduction">Telerik UI for PHP</a> is a Kendo UI product flavor which targets the PHP web application developers. It includes PHP classes for configuring all Kendo UI widgets.</p>

<ul>
<li><a href="/intro/supporting/list-of-widgets">List of Kendo UI Components</a></li>
<li><a href="/intro/supporting/browser-support">Browser Support</a></li>
<li><a href="http://www.telerik.com/download/php-ui">Evaluate Telerik UI for PHP</a></li>
<li><a href="http://www.telerik.com/purchase/php-ui">Get a License</a></li>
<li><a href="http://www.telerik.com/purchase/license-agreement/php-ui">License Agreement</a></li>
<li><a href="/php/introduction">Documentation</a></li>
</ul>

<h4>RadSpreadProcessing</h4>

<p><a href="http://www.telerik.com/products/wpf/spreadsheet-processing.aspx">RadSpreadProcessing</a> is a .NET library which allows you to read, create, and write Microsoft Excel (.xlsx) documents. It complements the Spreadsheet component and allows you to process the data on the server, but can be used on its own as well.</p>

<ul>
<li><a href="http://docs.telerik.com/aspnet-mvc/helpers/spreadsheet/spreadsheet-processing">Server-Side Processing with the Telerik UI for ASP.NET MVC Spreadsheet</a></li>
<li><a href="/controls/data-management/spreadsheet/import-and-export-data/server-side-processing">Server-Side Processing with the Kendo UI Spreadsheet</a></li>
<li><a href="http://docs.telerik.com/devtools/wpf/controls/radspreadprocessing/overview">RadSpreadProcessing Overview</a></li>
</ul>

<h2 id="other-kendo-ui-incorporating-products"><a href="#other-kendo-ui-incorporating-products">Other Kendo UI-Incorporating Products</a></h2>

<p>Kendo UI Core is the free and open-source Kendo UI distribution, released under Apache v2.0 License. It provides access to a limited number of widgets and framework features, and to 1,000+ tests running across browsers for each commit to the <a href="https://github.com/telerik/kendo-ui-core">Kendo UI Core GitHub repository</a>. Kendo UI Core is suitable for open-source or commercial projects that do not require complex UI, such as the Grid, Chart, and other, nor dedicated technical support. Kendo UI Core does not offer dedicated technical support.</p>

<ul>
<li><a href="/intro/supporting/list-of-widgets">List of Kendo UI Components</a></li>
<li><a href="/intro/supporting/browser-support">Browser Support</a></li>
</ul>

<p>Kendo UI is also incorporated into products such as <a href="http://www.telerik.com/platform#overview">Telerik Platform</a>, <a href="http://www.telerik.com/analytics">Telerik Analytics</a>, <a href="http://www.sitefinity.com/">Sitefinity</a>, <a href="http://www.telerik.com/teampulse">TeamPulse</a>, <a href="http://www.telerik.com/teststudio">Test Studio</a>, and others.</p>

<h2 id="next-steps"><a href="#next-steps">Next Steps</a></h2>

<ul>
<li><a href="/intro/installation/getting-started">Get Started with Kendo UI</a></li>
<li><a href="/intro/installation/bower-install">Install Kendo UI as a Bower Package</a></li>
<li><a href="/intro/installation/cdn-service">Use Kendo UI CDN Services</a></li>
<li><a href="/intro/installation/what-you-need">Include Only What You Need</a></li>
<li><a href="/intro/installation/prerequisites">JavaScript Prerequisites</a></li>
<li><a href="/intro/installation/jquery-initialization">Initialize Widgets Using jQuery Plug-Ins</a></li>
<li><a href="/intro/installation/markup">Initialize Widgets Using Markup</a></li>
<li><a href="/intro/widget-basics/wrapper-element">Access Widget DOM Elements: wrapper and element</a></li>
<li><a href="/intro/widget-basics/data-attribute-initialization">Set Data Attributes</a></li>
<li><a href="/intro/widget-basics/events-and-methods">Call Widget Methods and Bind to Events</a></li>
<li><a href="/intro/widget-basics/destroy">Destroy Widgets</a></li>
<li><a href="/intro/widget-basics/create-custom-kendo-widget">Create Custom Kendo UI Widgets</a></li>
</ul>

<h2 id="learning-resources"><a href="#learning-resources">Learning Resources</a></h2>

<ul>
<li><a href="http://dojo.telerik.com/">Kendo UI Dojo Interactive Learning Platform</a></li>
<li><a href="http://www.telerik.com/support/kendo-ui">Kendo UI Support and Learning Resources</a></li>
<li><a href="https://www.youtube.com/user/kendouiTV">Kendo UI YouTube Channel</a></li>
</ul> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

